<template>
  <div class="employee">
    <div class="employee-container">
      <!-- 顶部 - 权限按钮功能卡片模块 -->
      <el-card class="box-card">
        <div class="head-card">
          <div class="h-left">
            <el-tag class="top-message">
              <i class="el-icon-warning" />
              <span>共 36 条记录</span>
            </el-tag>
          </div>
          <!-- 右 - 功能按钮模块 -->
          <div class="h-right">
            <el-button size="medium" type="primary" plain>导入excel</el-button>
            <el-button size="medium" type="warning" plain>导出excel</el-button>
            <el-button size="medium" type="success" plain>新增员工</el-button>
          </div>
        </div>
      </el-card>

      <!-- 主体 - 员工表格模块 -->
      <div class="main-table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
          />
          <!-- <el-table-column
            prop="staffPhoto"
            label="用户头像"
          /> -->
          <el-table-column
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
          />
          <el-table-column
            label="操作"
            width="250"
          >
            <el-button size="small" type="primary" plain>查看</el-button>
            <el-button size="small" type="success" plain>分配角色</el-button>
            <el-button size="small" type="warning" plain>删除</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeeListRequest } from '@/api/employees'
export default {
  data() {
    return {
      // 表格数据
      tableData: []
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    // 请求 - 获取员工列表
    async getEmployeeList() {
      try {
        const res = await getEmployeeListRequest()
        if (res.success) {
          // console.log(res)
          this.tableData = res.data.rows
        } else {
          this.$message.error(res.message, '获取员工列表失败')
        }
      } catch (error) {
        console.log('获取员工列表失败', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 20px;
  // 顶部 - 权限功能按钮模块
  .head-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-message {
      font-size: 15px !important;
      span {
        color: #767676 !important;
        margin-left: 6px;
      }
    }
  }

  // 主体 - 员工表格模块
  .main-table {
    margin-top: 25px;
  }

}
</style>
